<template>
  <div class="editor-wrapper">
    <div :id="editorId"></div>
  </div>
</template>

<script>
import Editor from 'wangeditor'
import 'wangeditor/release/wangEditor.min.css'
import { oneOf } from '@/libs/tools'
export default {
  name: 'Editor',
  props: {
    value: {
      type: String,
      default: ''
    },
    /**
     * 绑定的值的类型, enum: ['html', 'text']
     */
    valueType: {
      type: String,
      default: 'html',
      validator: (val) => {
        return oneOf(val, ['html', 'text'])
      }
    },
    /**
     * @description 设置change事件触发时间间隔
     */
    changeInterval: {
      type: Number,
      default: 200
    },
    /**
     * @description 是否开启本地存储
     */
    cache: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    editorId () {
      return `editor${this._uid}`
    }
  },
  methods: {
    setHtml (val) {
      this.editor.txt.html(val)
    }
  },
  mounted () {
    this.editor = new Editor(`#${this.editorId}`)
    this.editor.customConfig.onchange = (html) => {
      let text = this.editor.txt.text()
      if (this.cache) localStorage.editorCache = html
      this.$emit('input', this.valueType === 'html' ? html : text)
      this.$emit('on-change', html, text)
    }
    this.editor.customConfig.onchangeTimeout = this.changeInterval
    
    //图片上传
    this.editor.customConfig.showLinkImg = false
    this.editor.customConfig.uploadImgServer = process.env.VUE_APP_API_URL + "/upload-file"
    this.editor.customConfig.uploadFileName = 'file'
    this.editor.customConfig.uploadImgHeaders  = {
        token: localStorage.getItem('token'),
    }
    this.editor.customConfig.uploadImgHooks = {
        // 上传图片之前
        before: function(xhr) {
            console.log(xhr)
            // 可阻止图片上传
            // return {
            //     prevent: true,
            //     msg: '需要提示给用户的错误信息'
            // }
        },
        // 图片上传并返回了结果，图片插入已成功
        success: function(xhr) {
            console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function(xhr, editor, resData) {
            console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function(xhr, editor, resData) {
            console.log('error', xhr, resData)
        },
        // 上传图片超时
        timeout: function(xhr) {
            console.log('timeout')
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function(insertImgFn, result) {
            // result 即服务端返回的接口
            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            insertImgFn(result.data.fileUrl)
        }
    }
    // create这个方法一定要在所有配置项之后调用
    this.editor.create()
    // 如果本地有存储加载本地存储内容
    // let html = this.value || localStorage.editorCache
    let html = this.value ||''
    if (html) this.editor.txt.html(html)
  }
}
</script>

<style lang="less">
.editor-wrapper *{
//   z-index: 100 !important;
}


.w-e-menu {
    z-index: 2 !important;
}

.w-e-text-container {
    z-index: 1 !important;
}
.w-e-toolbar {
    flex-wrap: wrap!important;
}


// .w-e-menu:first-child {
//     .w-e-droplist {
//         top: -223px!important;
//     }
// }
// .w-e-menu:nth-child(3) {
//     .w-e-droplist {
//         top: -243px!important;
//     }
// }
// .w-e-menu:nth-child(4){
//     .w-e-droplist {
//         top: -183px!important;
//     }
// }

// .w-e-menu:nth-child(8),
// .w-e-menu:nth-child(9){
//     .w-e-droplist {
//         top: -193px!important;
//     }
// }

.w-e-menu:last-child {
    display:none;
}

</style>
